<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="../css/general.css" rel="stylesheet" type="text/css">
<title></title>
<style type="text/css">
body {
	background: #80BDCB;
}

#tabbar-div {
	background: #278296;
	padding-left: 10px;
	height: 21px;
	padding-top: 0px;
}

#tabbar-div p {
	margin: 1px 0 0 0;
}

.tab-front {
	background: #80BDCB;
	line-height: 20px;
	font-weight: bold;
	padding: 4px 15px 4px 18px;
	border-right: 2px solid #335b64;
	cursor: hand;
	cursor: pointer;
}

.tab-back {
	color: #F4FAFB;
	line-height: 20px;
	padding: 4px 15px 4px 18px;
	cursor: hand;
	cursor: pointer;
}

.tab-hover {
	color: #F4FAFB;
	line-height: 20px;
	padding: 4px 15px 4px 18px;
	cursor: hand;
	cursor: pointer;
	background: #2F9DB5;
}

#top-div {
	padding: 3px 0 2px;
	background: #BBDDE5;
	margin: 5px;
	text-align: center;
}

#main-div {
	border: 1px solid #345C65;
	padding: 5px;
	margin: 5px;
	background: #FFF;
}

#menu-list {
	padding: 0;
	margin: 0;
}

#menu-list ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	color: #335B64;
}

#menu-list li {
	padding-left: 16px;
	line-height: 23px;
	cursor: hand;
	cursor: pointer;
}

#main-div a:visited,#menu-list a:link,#menu-list a:hover {
	color: #335B64 text-decoration :   none;
}

#menu-list a:active {
	color: #EB8A3D;
}

.explode {
	background: url(../images/menu_minus.gif) no-repeat 0px 3px;
	font-weight: bold;
}

.collapse {
	background: url(../images/menu_plus.gif) no-repeat 0px 3px;
	font-weight: bold;
}

.menu-item {
	background: url(../images/menu_arrow.gif) no-repeat 0px 3px;
	font-weight: normal;
}

#help-title {
	font-size: 14px;
	color: #000080;
	margin: 5px 0;
	padding: 0px;
}

#help-content {
	margin: 0;
	padding: 0;
}

.tips {
	color: #CC0000;
}

.link {
	color: #000099;
}
</style>
</head>
<body>
	<div id="tabbar-div">
<p><span class="tab-front" id="menu-tab">菜单</span> <!--<span class="tab-back" id="help-tab">帮助</span>-->
</p>
</div>
<div id="main-div">
<div id="menu-list">
<ul>
	<li class="explode" key="02" name="menu">通道管理
	<ul>
		<li class="menu-item"><a href="channelList" target="main-frame">通道信息</a></li>
		<li class="menu-item"><a href="channelAdd" target="main-frame">通道添加</a></li>
	</ul>
	</li>
	<li class="explode" key="03" name="menu">渠道管理
	<ul>
		<li class="menu-item"><a href="pipeList" target="main-frame">渠道信息</a></li>
		<li class="menu-item"><a href="pipeAdd" target="main-frame">渠道添加</a></li>
		<li class="menu-item"><a href="partnerList" target="main-frame">合作方信息</a></li>
		<li class="menu-item"><a href="partnerAdd" target="main-frame">合作方添加</a></li>
	</ul>
	</li>
	<li class="explode" key="04" name="menu">统计结算
	<ul>
		<li class="menu-item"><a href="reportShow" target="main-frame">按日统计</a></li>
		<li class="menu-item"><a href="settlementShow" target="main-frame">结算数据</a></li>
	</ul>
	</li>
	<li class="explode" key="04" name="menu">用户查询
	<ul>
		<li class="menu-item"><a href="javascript:void(0)" target="main-frame">订购数据查询</a></li>
	</ul>
	</li>
</ul>
</div>
<div id="help-div" style="display: none">
<h1 id="help-title"></h1>
<div id="help-content"></div>
</div>
</div>
<script type="text/javascript" src="../js/utils.js"></script>
<script language="JavaScript">
	var collapse_all = "闭合";
	var expand_all = "展开";
	var collapse = true;

	function toggleCollapse() {
		var items = document.getElementsByTagName('LI');
		for (i = 0; i < items.length; i++) {
			if (collapse) {
				if (items[i].className == "explode") {
					toggleCollapseExpand(items[i], "collapse");
				}
			} else {
				if (items[i].className == "collapse") {
					toggleCollapseExpand(items[i], "explode");
					ToggleHanlder.Reset();
				}
			}
		}

		collapse = !collapse;
		document.getElementById('toggleImg').src = collapse ? 'images/menu_minus.gif'
				: 'images/menu_plus.gif';
		document.getElementById('toggleImg').alt = collapse ? collapse_all
				: expand_all;
	}

	function toggleCollapseExpand(obj, status) {
		if (obj.tagName.toLowerCase() == 'li' && obj.className != 'menu-item') {
			for (i = 0; i < obj.childNodes.length; i++) {
				if (obj.childNodes[i].tagName == "UL") {
					if (status == null) {
						if (obj.childNodes[1].style.display != "none") {
							obj.childNodes[1].style.display = "none";

							obj.className = "collapse";
						} else {
							obj.childNodes[1].style.display = "block";

							obj.className = "explode";
						}
						break;
					} else {
						if (status == "collapse") {

							obj.className = "collapse";
						} else {

							obj.className = "explode";
						}
						obj.childNodes[1].style.display = (status == "explode") ? "block"
								: "none";
					}
				}
			}
		}
	}
	document.getElementById('menu-list').onclick = function(e) {
		var obj = Utils.srcElement(e);
		toggleCollapseExpand(obj);
	}

	document.getElementById('tabbar-div').onmouseover = function(e) {
		var obj = Utils.srcElement(e);

		if (obj.className == "tab-back") {
			obj.className = "tab-hover";
		}
	}

	document.getElementById('tabbar-div').onmouseout = function(e) {
		var obj = Utils.srcElement(e);

		if (obj.className == "tab-hover") {
			obj.className = "tab-back";
		}
	}

	document.getElementById('tabbar-div').onclick = function(e) {
		var obj = Utils.srcElement(e);

		var mnuTab = document.getElementById('menu-tab');
		var hlpTab = document.getElementById('help-tab');
		var mnuDiv = document.getElementById('menu-list');
		var hlpDiv = document.getElementById('help-div');

		if (obj.id == 'menu-tab') {
			mnuTab.className = 'tab-front';
			hlpTab.className = 'tab-back';
			mnuDiv.style.display = "block";
			hlpDiv.style.display = "none";
		}

		if (obj.id == 'help-tab') {
			mnuTab.className = 'tab-back';
			hlpTab.className = 'tab-front';
			mnuDiv.style.display = "none";
			hlpDiv.style.display = "block";

			loc = parent.frames['main-frame'].location.href;
			pos1 = loc.lastIndexOf("/");
			pos2 = loc.lastIndexOf("?");
			pos3 = loc.indexOf("act=");
			pos4 = loc.indexOf("&", pos3);

			filename = loc.substring(pos1 + 1, pos2 - 4);
			act = pos4 < 0 ? loc.substring(pos3 + 4) : loc.substring(pos3 + 4,
					pos4);
			loadHelp(filename, act);
		}
	}

	//-->
</script>
	
</body>
</html>